<template>
    <div id="tree">
        <el-tree
                :data="data"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps"
                :default-checked-keys="defaultchecked"
                @check-change="handleCheckChange"
                @node-click="selectCurrentNode"
        ></el-tree>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                defaultchecked: [1],
                data: [
                    {
                        id: 1,
                        label: "图层管理",
                        children: []

                    },
                ],
                defaultProps: {
                    children: "children",
                    label: "label",
                },
            };
        },
        created() {
            for (var i = 0; i < DATA_LIST.length; i++) {
                var node = new Object();
                node.label = DATA_LIST[i].name;
                node.id = DATA_LIST[i].name;
                node.isLeaf = true;
                this.data[0].children.push(node);
                if (DATA_LIST[i].isLoad) {
                    this.defaultchecked.push(node.id);
                }
            }

            // Silhouette a feature blue on hover.
            viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(
                movement
                ) {
                    // Pick a new feature
                    var pickedFeature = viewer.scene.pick(movement.endPosition);
                    console.log(pickedFeature,"pickedFeature");
                    if (!Cesium.defined(pickedFeature)) {
                        return;
                    }
                    console.log(pickedFeature.getOwnPropertyNames());
                    var name = pickedFeature.getProperty("id");

                },
                Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        },
        mounted() {
        },
        methods: {
            handleCheckChange(data, checked) {
                if (DATA_LIST_Manage[data.id]) {
                    DATA_LIST_Manage[data.id].show = checked;
                }
            },
            selectCurrentNode(data, node) {
                console.log(DATA_LIST_Manage[data.id]);
                viewer.zoomTo(DATA_LIST_Manage[data.id]);
            }
        },
        destroyed() {
        }
    };
</script>
<style lang="scss">
    #tree {
        width: 100%;
        height: 650px;
        padding: 9px;
        box-sizing: border-box;
        overflow: hidden;

        .el-tree {
            background: transparent;
            height: 620px;
            overflow-x: hidden;
            overflow-y: scroll;
            // 子节点不显示checkbox
            .el-tree-node:focus > .el-tree-node__content {
                background-color: transparent;
            }

            .el-tree-node__children .el-tree-node__children .el-checkbox {
                display: none;
            }

            //====================
            .el-tree-node__children .el-tree-node__children .el-icon-caret-right {
                display: none;
            }

            .el-tree-node__children .el-tree-node__label {
                color: white;
            }

            .el-tree-node__content span {
                color: white;
            }

            .el-tree-node__content:hover {
                background: #194c8b;
            }

            .el-tree-node.is-current > .el-tree-node__content {
                background: #194c8b;
            }
        }

        .el-tree::-webkit-scrollbar {
            display: none;
        }
    }
</style>